<template>
  <el-table :data="options" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="生成时间">
            <span>{{ props.row.articleId.time }}</span>
          </el-form-item>
          <el-form-item label="商品名称">
            <span>{{ props.row.articleId.name }}</span>
          </el-form-item>
          <el-form-item label="所属用户">
            <span>{{ props.row.userId.userName }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.articleId._id }}</span>
          </el-form-item>
          <el-form-item label="买家 ID">
            <span>{{ props.row.userId._id }}</span>
          </el-form-item>
            <el-form-item label="卖家 ID">
            <span>{{ props.row.sell._id }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.articleId.type }}</span>
          </el-form-item>
          <el-form-item label="商品总价">
            <span>{{ props.row.articleId.price }}</span>
          </el-form-item>
          <el-form-item label="商品图片">
    <el-image :src="url+props.row.articleId.img[0]" style="width:200px;height:200px"></el-image>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="商品 ID" prop="_id" align="center">
    </el-table-column>
    <el-table-column label="商品名称" prop="articleId.name" align="center">
    </el-table-column>
    <el-table-column label="描述" prop="articleId.type" align="center">
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >查看</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import config from '@/utils/config.js';
import orderApi from "../../api/orders.js";

export default {
  created() {
    orderApi.getAll().then((res) => {
      this.options = res;
      console.log(this.options[0]);
    });
  },
  methods: {
    // 编辑事件
    handleEdit(index, row) {
      console.log(index, row);
      this.$router.push({ name: `Update`, params: row });
    },
    // 删除事件
    async handleDelete(index, row) {
      console.log(index, row);
      // index为索引，row为本行数据
      await orderApi.delete(row._id);
      await orderApi.getAll().then((res) => {
        this.options = res;
        console.log(this.options);
      });
    },
  },
  data() {
    return {
      url: config["resource_server"],
      options: [],
     
    };
  },
};
</script>
